<template>
  <div class="section-header text-center section-header--dark">
    <h2>大家对我们的评价</h2>
<!--     <p class="style2">Interdum et malesuada fames ac ante ipsum</p>
 -->  </div>
  <div class="testimonial__wrapper">
    <swiper
      :modules="[Thumbs]"
      :thumbs="{ swiper: thumbsSwiper }"
      :slides-per-view="1"
      :effect="effect"
    >
      <swiper-slide v-for="(item, index) in testimonials" :key="index">
        <div class="testimonial__item">
          <div class="testimonial__item-inner">
            <div class="testimonial__item-content">
              <span><i class="fa-solid fa-quote-left"></i></span>
              <blockquote class="blockquote">
                <p>{{ item.quote }}</p>
              </blockquote>
              <blockquote class="blockquote">
                <p></p>
              </blockquote>
              <div class="testimonial__item-author">
                <p>{{ item.name }}</p>
                <span>{{ item.role }}</span>
              </div>
            </div>
          </div>
        </div>
      </swiper-slide>
    </swiper>
    <swiper
      class="testimonial__author mt-5"
      :modules="[Thumbs]"
      watch-slides-progress
      :breakpoints="breakpointsTumbs"
      @swiper="setThumbsSwiper"
      :slides-per-view="4"
      :spaceBetween="10"
    >
      <swiper-slide v-for="item in testimonials" :key="item">
        <div class="testimonial__author-thumb">
          <img :src="item.thumbnail" alt="author-image" />
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { ref } from "vue";
import { Thumbs } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    const thumbsSwiper = ref(null);
    const setThumbsSwiper = (swiper) => {
      thumbsSwiper.value = swiper;
    };
    const effect = "fade";
    return {
      Thumbs,
      thumbsSwiper,
      setThumbsSwiper,
      effect,
    };
  },

  props: {
    testimonials: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      breakpointsTumbs: {
        768: {
          slidesPerView: 5,
        },
        1200: {
          slidesPerView: 5,
          spaceBetween: 15,
        },
        1440: {
          slidesPerView: 5,
          spaceBetween: 20,
        },
      },
    };
  },
};
</script>
<style lang="scss" scoped>
@mixin breakpoint($point) {
  @if $point==sm {
    @media (min-width: 576px) {
      @content;
    }
  } @else if $point==max-xsm {
    @media (max-width: 320px) {
      @content;
    }
  } @else if $point==max-sm {
    @media (max-width: 575px) {
      @content;
    }
  } @else if $point==md {
    @media (min-width: 768px) {
      @content;
    }
  } @else if $point==max-md {
    @media (max-width: 767px) {
      @content;
    }
  } @else if $point==lg {
    @media (min-width: 992px) {
      @content;
    }
  } @else if $point==max-lg {
    @media (max-width: 991px) {
      @content;
    }
  } @else if $point==mlg {
    @media (min-width: 1024px) {
      @content;
    }
  } @else if $point==max-mlg {
    @media (max-width: 1023px) {
      @content;
    }
  } @else if $point==xl {
    @media (min-width: 1200px) {
      @content;
    }
  } @else if $point==max-xl {
    @media (max-width: 1199px) {
      @content;
    }
  } @else if $point==xxl {
    @media (min-width: 1400px) {
      @content;
    }
  } @else if $point==max-xxl {
    @media (max-width: 1399px) {
      @content;
    }
  } @else if $point==xxxl {
    @media (min-width: 1600px) {
      @content;
    }
  } @else if $point==max-xxxl {
    @media (max-width: 1599px) {
      @content;
    }
  }
}

.testimonial__author {
  padding: 5px;
  max-width: 90%;

  @include breakpoint(sm) {
    max-width: 70%;
  }

  @include breakpoint(md) {
    max-width: 65%;
  }

  @include breakpoint(lg) {
    max-width: 55%;
  }

  @include breakpoint(xl) {
    max-width: 45%;
  }
}

.testimonial__item-content {
  i {
    font-size: 4.375rem;
    color: rgb(177, 253, 175);
    margin-block-end: 40px;
  }
}
</style>